<template>
<div id="hd">
  <img src="../../../assets/LOGO/LOGO.png">
  <div class="hdIcon">
    <van-icon @click="gouGoSearch()" class="icon" name="search"  size="1.5rem" ></van-icon>
    <van-icon  class="icon icon1" name="wap-nav" size="1.5rem" @click="isShow1" ></van-icon>
    <van-popup class="vanpo" v-model="leftShow" position="left" :style="{ width: '40%', height: '100%'}"  >
      <ul>
        <li class="li1">
          <van-cell is-link @click="isShow2">
            <div>
              <van-icon  class="iconPerson" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="1.7rem"/>
              <p>登录/注册</p>
            </div>
          </van-cell>
        </li>
        <li><span>首页</span></li>
        <li>
          <van-collapse v-model="activeName" accordion >
            <van-collapse-item title="课程分类" >
              <div class="convenience" v-for="(item,index) in projectList" :key="index">{{item.subjectTitle}} </div></van-collapse-item>
          </van-collapse></li>
        <li><span>专属课程</span></li>
      </ul>

    </van-popup>
    <van-popup v-model="loginShow">
   <div><IoginBox/></div>
    </van-popup>
  </div>

</div>
</template>

<script>
import {getProjectList} from "@/api/login-api";
import IoginBox from "@/views/login/components/IoginBox";
// import LoginLay from "@/views/login/LoginLay";

export default {
name: "IndexHead",
  data(){
    return{
      leftShow: false,
      loginShow:false,
      show: false,
      isshow:false,
      activeName: '10',
      projectList:[],
      // gouGoSearch:"",
  }
  },
  components:{
    IoginBox
  },
  methods: {
    isShow1() {
      this.leftShow = true;
      this.loginShow = false;
    },
    isShow2() {
      this.loginShow = true;
      this.leftShow = false;
    },
    gouGoSearch(){
      this.$router.push({path:"/GoSearch"})
      // console.log(111)
    },
  },

  created() {
    getProjectList().then(res=>{
      this.projectList=res.rows
    })
  }
}
</script>

<style scoped lang="less">

#hd{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  .hdIcon {
    display: flex;
    color: rgba(0, 0, 0, .45);
    .icon{
      padding: 13px 4px;
    }
    .icon1{
      margin-right: 10px;
    }
    ul{
      list-style: none;
      li{
        margin-top: 20px;
      }
      .li1{
        margin-top: 10px;
        border-bottom: 1px solid pink;
         div{
           display: flex;
          .iconPerson{
            margin: 10px 10px;
         }

      }
      }
  }
  }
  .convenience{
    font-size: 12px;
    margin-top: 12px;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
/deep/.van-icon-arrow::before {
  content: ' ';
}
</style>